<template>
    <view class="u-demo">
        <view class="u-demo-wrap">
            <view class="u-demo-title">演示效果</view>
            <view class="u-demo-area">
                <u-toast ref="uToast"></u-toast>
                <view class="u-no-demo-here">请点击弹出弹窗查看效果</view>
                <u-modal ref="uModal" v-model="show" :show-cancel-button="true" :show-title="showTitle" :async-close="asyncClose" @confirm="confirm" :content="content">
                    <!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
                    <template #default v-if="contentSlot">
                        <view class="warp" style="margin: 30rpx">
                            <image class="logo" src="https://ik.imagekit.io/anyup/uview-pro/common/logo.png" style="width: 220rpx" mode="widthFix"></image>
                        </view>
                    </template>
                    <!-- #endif -->
                </u-modal>
            </view>
        </view>
        <view class="u-config-wrap">
            <view class="u-config-title u-border-bottom">参数配置</view>
            <view class="u-config-item">
                <view class="u-item-title">状态</view>
                <u-subsection :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
            </view>
            <view class="u-config-item">
                <view class="u-item-title">是否显示标题</view>
                <u-subsection current="0" :list="['是', '否']" @change="titleChange"></u-subsection>
            </view>
            <!-- #ifndef MP-WEIXIN -->
            <view class="u-config-item">
                <view class="u-item-title">自定义内容</view>
                <u-subsection current="1" :list="['是', '否']" @change="contentChange"></u-subsection>
            </view>
            <!-- #endif -->
            <view class="u-config-item">
                <view class="u-item-title">异步关闭</view>
                <u-subsection current="1" :list="['是', '否']" @change="asyncChange"></u-subsection>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            zoom: false,
            content: '慈母手中线，游子身上衣',
            contentSlot: false,
            showTitle: true,
            asyncClose: false
        };
    },
    computed: {
        current() {
            return this.show ? 0 : 1;
        }
    },
    methods: {
        showChange(index) {
            this.show = !index;
        },
        titleChange(index) {
            this.showTitle = !index;
            this.show = true;
        },
        contentChange(index) {
            this.contentSlot = !index;
            this.show = true;
        },
        asyncChange(index) {
            this.show = true;
            this.asyncClose = !index;
        },
        confirm() {
            setTimeout(() => {
                this.show = false;
            }, 2000);
        }
    }
};
</script>

<style scoped lang="scss">
.logo {
    height: auto;
    will-change: transform;
}
</style>
